<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/swiper-4.3.5.min.css">
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/discount/seckilling.css">
    <title>优惠活动-团购</title>
</head>

<body>
    <div id="app" v-cloak>
        <headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <searchs></searchs>

            <car_box></car_box>

        </div>

        <!-- 商品分类 -->
        <div class="class_box wrap">
            <div class="sub_nav_box">
                <ul class="sub_nav fl">
                    <li @click='seckilling'>限时秒杀</li>
                    <li class="active">团购优惠</li>
                    <li @click='cyc_buy'>周期购</li>
                </ul>
            </div>
        </div>
        <!-- 限时秒杀 -->
        <!-- <div class="time_box wrap">
            <div class="swiper-container seckill_swiper" @mouseenter='show_swiper_btn' @mouseleave='hidden_swiper_btn'>
                <div class="swiper-wrapper">
                    <div class="swiper-slide time_item stop-swiping" v-for="(book,index) in books" >
                        <span class="time_tit">16:00</span><span class="time_active">正在进行</span>
                    </div>

                </div>
                <div class="swiper-button-next" v-show='seckill_swiper_btn'></div>
                <div class="swiper-button-prev" v-show='seckill_swiper_btn'></div>
            </div>
        </div> -->

        <!-- 秒杀列表 -->
        <div class="seckill_box wrap">
            <div class="seckill_item fl" v-for='(item,index) in group_list'>
                <div class="seckill_img cursor" @click='group_detail(item.id,item.goodsId,item.status)'>
                    <img :src='item.goodsImage' alt="">
                </div>
                <div class="seckill_text">
                    <p class="seckill_tit">
                        {{item.goodsName}}
                    </p>
                    <div class="seckill_money" v-if="item.groupsSkuList.length!=0">
                        <span class="money_icon">￥</span>{{item.groupsSkuList[0].goodsPrice}}
                        <span class="pin_peopel">{{item.groupNum}}人团</span>
                        <span class="buy_btn fr" v-if="item.status==0" @click='group_detail(item.id,item.goodsId,item.status)'>立即拼团</span>
                        <span class="nobuy_btn fr" v-else-if="item.status==1" @click='group_detail(item.id,item.goodsId,item.status)'>立即拼团</span>
                    </div>
                    <div class="last_text">
                        <!-- <div class="fl">单买价 ￥{{item.groupsSkuList[0].salesPrice}}</div> -->
                        <div class="fr">{{item.saleNum}}人已拼</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="integral_page wrap">
            <el-pagination background @current-change="handleCurrentChanges" :page-size="20" :current-page="currentPage"
                layout="prev, pager, next" :total="total" class="page_list">
            </el-pagination>
        </div>
       <div class="wrap clear_both">             <productfooter></productfooter>         </div>
    </div>

    <script src="../js/axios.js"></script>         <script src="../js/qs.js"></script>
    <script src="../js/swiper-4.3.5.min.js"></script>
    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    seckill_swiper_btn:true,
                    group_list:'',
                    car_active:false,
                    groups:3,
                    total:0
                };
            },
            created() {
                
            },
            mounted() {
                this.listUserUser(1)
            },
            methods: {
                handleCurrentChanges(value){
                    this.listUserUser(value)
                },
                // 团购列表
                listUserUser(page) {
                    axios({
                        method:"POST",
                        url:base_url + "/group/listUserUser",
                        data:Qs.stringify({
                            pageSize:20,
                            pageNum:page
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.total =res.data.data.list.total
                        app.group_list = res.data.data.list.list
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 显示购物车               
                go_shop_car(){                     
                    window.location.href='../product/shop_car.html'  
                },
                car_box(){
                    this.car_active = !this.car_active
                },
               // 显示隐藏秒杀按钮
               show_swiper_btn(){
                    this.seckill_swiper_btn = true
                },
                hidden_swiper_btn(){
                    this.seckill_swiper_btn = false
                },
                seckilling(){
                    window.location.href='seckilling.html'
                },
                cyc_buy(){
                    window.location.href='cyc_buy.html'
                },
                search_btn(){
                    window.location.href='../product/search.html'
                },
                group_detail(groupId,goodsId,status){
                    if (status==0) {
                        window.location.href='../product/group_detail.html?groupId='+groupId+'&goodsId='+goodsId
                    }else if (status==1) {
                        app.$message.error('产品已拼团成功，请选择其他商品');
                    }
                }
            }
        })
        
    </script>
</body>

</html>